<template>
<div>
    <!--头部操作行开始-->
    <div class="form-top">
        <div class="form-top-left">
            <span>图片的位置：</span>
            <el-select v-model="valueDown">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>

            <el-row>
                <el-button type="primary" @click="Getlist">查询</el-button>
                <el-button @click="GetBack">重置</el-button>
            </el-row>
        </div>
        <!--右侧全局操作按钮-->
        <div class="form-top-right">
            <!--<el-button type="xingjian" icon="el-icon-plus" @click="dialogFormVisible = true">新建</el-button>-->
            <Build-forum :getForumList="getForumList" showBetCode="wzgl-sy-qflt-xj"></Build-forum>
            <DeleteAll title="是否要删除所选图片?" :multipleSelection="multipleSelection" :getBannerList="getForumList" type="2"></DeleteAll>
        </div>
    </div>
    <!--头部操作行结束-->
    <!--中间表格区域开始-->
    <el-table ref="multipleTable" :data="ForumList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :border="true">
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column label="编号" width="164" prop="picNo" align="center"></el-table-column>
        <el-table-column prop="picName" label="图片名称" width="342" align="center"></el-table-column>
        <el-table-column prop="picUrl" label="图片" show-overflow-tooltip width="181" align="center">
            <template slot-scope="scope">
                <span class="jia-pic">
                    <img :src="baseUrl+ scope.row.picUrl" alt />
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="picCode" label="图片位置" show-overflow-tooltip width="214" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.picCode==='FORUM_PIC'">清风论坛</span>
                <span v-else-if="scope.row.picCode==='YL_CLASS'">亦廉课堂</span>
                <span v-else-if="scope.row.picCode==='LEARN_OTHER'">他山之石</span>
                <span v-else-if="scope.row.picCode==='ARM_YOUSELF'">警示教育</span>
            </template>
        </el-table-column>
        <el-table-column prop="userd" label="状态" show-overflow-tooltip width="135" align="center">
            <template slot-scope="scope">
                <div v-if="scope.row.userd===1">
                    <span class="green-border"></span>
                    <span>启用</span>
                </div>
                <div v-else>
                    <span class="red-border"></span>
                    <span>停用</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="opTime" label="创建时间" show-overflow-tooltip width="178" align="center"></el-table-column>
        <el-table-column prop="operation" label="操作" show-overflow-tooltip width="283">
            <template slot-scope="scope">
                <el-button-group>
                    <!--<el-button type="bianji" @click="GoTextEditor">编辑</el-button>-->
                    <Bianji-forum :id="scope.row.id" :getForumList="getForumList" showBetCode="wzgl-sy-qflt-xg"></Bianji-forum>
                    <!--<el-button type="warning">禁用</el-button>-->
                    <Disable :row="scope.row" :GetDisable="GetDisable" v-if="scope.row.userd===1" showBetCode="wzgl-sy-qflt-ty"></Disable>
                    <Enable :row="scope.row" :GetEnable="GetEnable" v-else showBetCode="wzgl-sy-qflt-qy"></Enable>
                    <!--<el-button type="shanchuevery" @click="open">删除</el-button>-->
                    <Single-deletion :clearOne="clearOne" :id="scope.row.id" showBetCode="wzgl-sy-qflt-del"></Single-deletion>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 20px"></div>
    <!--中间表格区域结束-->
    <!-- 分页开始 -->
    <div class="fenye-bottom">
        <Pagination :total="total" :params="paramsForum" :get="getForumList"></Pagination>
    </div>

    <!-- 分页结束 -->
</div>
</template>

<script>
import DeleteAll from "@/components/Popup/DeleteAll.vue";
import Disable from "@/components/Popup/Disable.vue";
import Enable from "@/components/Popup/Enable.vue";
import Pagination from "@/components/Popup/Pagination.vue";

import SingleDeletion from "@/components/Popup/SingleDeletion.vue";
import NewlyBuild from "@/components/Popup/NewlyBuild.vue";
import Edit from "@/components/Popup/Edit.vue";
import BuildForum from "./BuildForum";
import BianjiForum from "./BianjiForum";

export default {
    components: {
        DeleteAll,
        Disable,
        Enable,
        SingleDeletion,
        NewlyBuild,
        Edit,
        Pagination,
        BuildForum,
        BianjiForum,
    },
    data() {
        return {
            valueDown: "全部",
            //列表请求信息
            paramsForum: {
                pageNum: 1,
                pageSize: 10,
                picCode: "",
            },
            //列表存放
            ForumList: [],
            //列表数
            total: 0,
            dialogTableVisible: false,
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
            formLabelWidth: "120px",
            options: [{
                    value: 1,
                    label: "全部",
                },
                {
                    value: 2,
                    label: "清风论坛",
                },
                {
                    value: 3,
                    label: "亦廉课堂",
                },
                {
                    value: 4,
                    label: "他山之石",
                },
                {
                    value: 5,
                    label: "警示教育",
                },
            ],
            value: "",
            multipleSelection: [],
            currentPage4: 4,
        };
    },
    computed: {
        //图片获取根路径
        baseUrl() {
            return this.$store.state.PortalManagement.fileIp;
        },
    },
    created() {
        this.getForumList();
    },
    methods: {
        //重置按钮
        GetBack() {
            this.valueDown = "全部";
            this.paramsForum = {};
            this.paramsForum = {
                pageNum: 1,
                pageSize: 10,
                picCode: "",
            };
            this.getForumList();
        },
        //查询按钮
        Getlist() {
            switch (this.valueDown) {
                case 1:
                    this.paramsForum = {};
                    this.paramsForum = {
                        pageNum: 1,
                        pageSize: 10,
                        picCode: "",
                    };
                    this.getForumList();
                    break;
                case 2:
                    this.paramsForum = {};
                    this.paramsForum = {
                        pageNum: 1,
                        pageSize: 10,
                        picCode: "FORUM_PIC",
                    };
                    this.getForumList();
                    break;
                case 3:
                    this.paramsForum = {};
                    this.paramsForum = {
                        pageNum: 1,
                        pageSize: 10,
                        picCode: "YL_CLASS",
                    };
                    this.getForumList();
                    break;
                case 4:
                    this.paramsForum = {};
                    this.paramsForum = {
                        pageNum: 1,
                        pageSize: 10,
                        picCode: "LEARN_OTHER",
                    };
                    this.getForumList();
                    break;
                case 5:
                    this.paramsForum = {};
                    this.paramsForum = {
                        pageNum: 1,
                        pageSize: 10,
                        picCode: "ARM_YOUSELF",
                    };
                    this.getForumList();
                    break;
            }
        },
        //单行删除
        clearOne(id) {
            let ID = {
                ids: [{
                    id: id,
                }, ],
                type: "2",
            };
            // console.log(ID,12121)
            this.Api.getBannerListClear(ID).then((res) => {
                this.getForumList();
            });
        },
        //警用，停用按钮
        GetDisable(params) {
            this.Api.getFroumStop(params).then((res) => {
                if (res.code == 0) {
                    this.getForumList();
                }
            });
        },
        //启动按钮
        GetEnable(params) {
            this.Api.getFroumOpen(params).then((res) => {
                if (res.code == 0) {
                    this.getForumList();
                }
            });
        },
        //Forum列表获取
        getForumList() {
            this.Api.getFroumList(this.paramsForum).then((res) => {
                this.ForumList.length = 0;
                // console.log(res.data,11212)
                this.ForumList = res.data.records;
                this.total = res.data.total;
                // console.log(this.BannerListTop, 111);
            });
        },
        open() {
            this.$confirm("是否要删除所选图片？", "提示", {
                    cancelButtonText: "取消",
                    confirmButtonText: "确定",

                    type: "warning",
                    center: true,
                })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        //表格方法
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
    },
};
</script>

<style lang="less" scoped>
.form-top {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;

    .form-top-left {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 21px;

        /deep/.el-input__inner {
            width: 154px;
            height: 36px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            border: 1px solid rgba(230, 230, 230, 1);
        }
    }

    .form-top-right {
        display: flex;
    }
}

/deep/.el-select {
    margin-right: 10px;
}

/deep/.el-button--primary {
    width: 52px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    padding: 0;
}

/deep/.el-button--default {
    width: 52px;
    height: 36px;
    background: rgba(240, 242, 245, 1);
    border-radius: 3px;
    border: 1px solid rgba(215, 219, 224, 1);
    padding: 0;
}

/deep/.el-button--xingjian {
    width: 80px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    padding: 0;
    color: white;
    margin-right: 10px !important;
}

/deep/.el-button--shanchu {
    width: 80px;
    height: 36px;
    background: rgba(255, 255, 255, 1);
    border-radius: 3px;
    border: 1px solid rgba(251, 54, 63, 1);
    padding: 0;
    color: #fb363f;
}

/deep/.el-table__header {
    background-color: #e8e8e8 !important;
}

/deep/.el-table_1_column_1 {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

/deep/.el-table {
    td {
        padding: 8px 0;
    }

    th {
        padding: 8px 0;
    }
}

/deep/.el-button--bianji {
    width: 60px;
    height: 28px;
    background: rgba(61, 127, 255, 1);
    border-radius: 4px;
    color: white;
    padding: 0;
    margin-right: 20px !important;
}

/deep/.el-button--warning {
    width: 60px;
    height: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    border-radius: 4px;
    color: white;
    padding: 0;
    margin-right: 20px !important;
    background: rgba(245, 166, 35, 1) !important;
}

/deep/.el-button--shanchuevery {
    width: 60px;
    height: 28px;
    background: rgba(251, 54, 63, 1);
    border-radius: 4px;
    color: white;
    padding: 0;
}

.jia-pic {
    display: inline-block;
    width: 104px;
    height: 30px;

    img {
        width: 104px;
        height: 30px;
    }
}

/deep/.has-gutter {
    /deep/tr {
        height: 45px;
    }

    tr th:nth-last-of-type(2) {
        >.cell {
            text-align: center;
        }
    }
}

.fenye-bottom {
    display: flex;
    justify-content: flex-end;
}

/**禁用按钮位置flex */

/deep/tbody {
    tr {
        height: 45px !important;

        td {
            padding: 0px 0 !important;
        }
    }

    tr td:last-child {
        .el-tooltip {
            .el-button-group {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

.green-border {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: rgba(82, 196, 26, 1);
    border-radius: 50%;
    margin-right: 8px;
}

.red-border {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: rgba(251, 54, 63, 1);
    border-radius: 50%;
    margin-right: 8px;
}
</style>
